<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="/pages/templates/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:o="http://omnifaces.org/ui">

	<ui:define name="title">
        SISCLAS-INCIDENCIAS
    </ui:define>

	<ui:define name="content">

		<h:form id="form">

			<p:growl id="growl" showDetail="true" life="2500" widgetVar="Test" />

			<o:importConstants
				type="pe.edu.sisclas.model.domain.constants.MessagesView" />
			<script type="text/javascript">
				function handleComplete(xhr, status, args) {
					if (args.validationFailed) {
						showError();
					}
				}
			</script>

			<!-- POPUP PARA EL FORMULARIO DE CREACIÓN DE USUARIO  -->
			<!-- <p:blockUI block="display" trigger="saveBtn" />-->

			<!-- Dialog para crear usuario -->
			<p:dialog id="dialog" widgetVar="dialog" header="Nuevo Usuario">

				<h:panelGrid id="display" columns="2" cellpadding="4">

					<p:row>
						<p:column>
							<p:fieldset styleClass="customFieldSet"
								legend="Búsqueda de Docente">
								<h:panelGrid id="display_basic" columns="2" cellpadding="4">
									<h:outputText value="Docente: " />
									<p:autoComplete
										value="#{validarUsuarioController.docenteSelec}"
										id="docente_item" widgetVar="docente" itemValue="#{u}"
										completeMethod="#{validarUsuarioController.completeDocente}"
										var="u" itemLabel="#{u.concatenar()}" maxResults="10"
										size="73" forceSelection="true">
										<o:converter converterId="omnifaces.ListConverter"
											list="#{validarUsuarioController.listaDocentesBusq}" />

										<p:column headerText="Código">
                                            #{u.codigoDocente}
                                        </p:column>
										<p:column headerText="Nombre">
                                            #{u.nombreDocente}
                                        </p:column>

									</p:autoComplete>


								</h:panelGrid>


							</p:fieldset>
						</p:column>
					</p:row>

				</h:panelGrid>


				<!-- Footer del dialog -->
				<p:panelGrid id="displayFooter" columns="1" cellpadding="3"
					styleClass="anchoTotal">
					<f:facet name="footer">
						<p:commandButton value="Registrar" icon="ui-icon-disk"
							actionListener="#{validarUsuarioController.procesarDialog}"
							styleClass="ui-priority-primary floatRight"
							process="@form:display,@this"
							update="@form:mainDataTable, @form:display, growl"
							oncomplete="handleComplete(xhr, status, args);}" />

						<p:commandButton value="Cancelar" onclick="PF('dialog').hide()"
							icon="ui-icon-close" process="@this" styleClass="floatRight" />
					</f:facet>
				</p:panelGrid>
				<!-- Footer del dialog -->


			</p:dialog>

			<!-- Panel principal -->
			<p:panel styleClass="panePrincipal">
				<div id="cuerpo">
					<p:toolbar id="toolBarPrin">
						<f:facet name="left">
							<h3 class="title-panel">Validación de Usuario</h3>
						</f:facet>

						<f:facet name="right">
							<span class="ui-separator"> <span
								class="ui-icon ui-icon-grip-dotted-vertical" />
							</span>

							<p:commandButton id="viewNuevo" styleClass="botonPeque"
								value="Nuevo" icon="ui-icon-document"
								update="@form:display, @form:growl, @form:dialog"
								oncomplete="PF('dialog').show()" process="@this"
								actionListener="#{validarUsuarioController.nuevoEvent}">
								<p:resetInput target="@form:display" />
							</p:commandButton>
						</f:facet>
					</p:toolbar>


					<p:dataTable id="mainDataTable" var="c" widgetVar="dt"
						value="#{validarUsuarioController.listaUsuarios}"
						rowKey="#{c.idUsuario}"
						selection="#{validarUsuarioController.usuarioSelec}"
						selectionMode="single" styleClass="datatable_style_general"
						paginator="true" rows="10" scrollWidth="100%"
						paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
						rowsPerPageTemplate="2,5,10" paginatorPosition="bottom"
						rowIndexVar="rowIndex"
						emptyMessage="#{MessagesView.NO_RECORDS_FOUND}">


						<p:column headerText="N°" style="font-size:16px" width="5%">
							<h:outputText value="#{rowIndex+1}" />
						</p:column>

<!-- 						<p:column headerText="Usuario" style="font-size:16px" width="10%"> -->
<!-- 							<h:outputText value="#{c.idUsuario}" /> -->
<!-- 						</p:column> -->

						<p:column headerText="Código de Docente" style="font-size:16px"
							width="10%">
							<center>
								<h:outputText value="#{c.docente.codigoDocente}" />
							</center>
						</p:column>

						<p:column headerText="Nombre de Docente" style="font-size:16px">
							<h:outputText value="#{c.docente.nombreDocente}" />
						</p:column>

						<p:column headerText="Eliminar" style="font-size:16px" width="12%">
							<center>
								<p:commandButton update="mainDataTable"
									actionListener="#{validarUsuarioController.Delete(c)}"
									value="Dar de baja" />
							</center>
						</p:column>
					</p:dataTable>

				</div>
			</p:panel>

			<p:remoteCommand name="updateGrowl" update=":form:growl" />

			<p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
				<p:commandButton value="Si" type="button"
					styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
				<p:commandButton value="No" type="button"
					styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
			</p:confirmDialog>

		</h:form>

	</ui:define>
</ui:composition>